﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>

</head>
<body>
    <h1>xmlHttpRequest测试</h1>
    <textarea id="myData" rows="3" cols="200">Hello World</textarea>
    <div>
        <table>
            <tr>
                <td>Get同步请求</td>
                <td><input type="button" value="Get同步请求" onclick="getTianqiByTongbu()" /></td>
            </tr>
            <tr>
                <td>Get异步请求</td>
                <td><input type="button" value="Get异步请求" onclick="getTianqiByYibu()" /></td>
            </tr>

            <tr>
                <td>post异步请求</td>
                <td><input type="button" value="post异步请求" onclick="postData()" /></td>
            </tr>

        </table>
    </div>

    <script type="text/javascript">
        //同步请求
        function getTianqiByTongbu() {
            var xhr = new XMLHttpRequest();
            xhr.open("get", "xmlhhtp.ashx?type=tianqi", false);
            xhr.send(null);

            if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                alert(xhr.responseText);
            } else {
                alert("解析错误");
            }
        }

        //异步请求
        function getTianqiByYibu() {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                        alert(xhr.responseText);
                    } else {
                        alert("解析错误");
                    }
                }
            }
            xhr.open("get", "xmlhhtp.ashx?type=tianqi", true);
            xhr.send(null);
        }

        //post方式
        function postData() {
            var data = document.getElementById("myData").value;
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                        alert(xhr.responseText);
                    } else {
                        alert("解析错误");
                    }
                }
            }
            xhr.open("post", "xmlhhtp.ashx?type=postData", true);
            xhr.send(data);
        }
    </script>
</body>
</html>
